웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용해 팝업창을 띄우는 방법은 그다지 어렵지 않습니다. window 객체의 open() 메소드를 사용하여 원하는 팝업을 한개 또는 다수 띄울 수 있죠. 하지만 만약 오늘 하루... 24시간 동안 팝업을 띄우지 않을 경우에는 어떻게 해야할까요? 아래는 24시간 동안 팝업을 띄우지 않는 방법에 대하여 알아보고 이를 사용한 예제소스를 함께 확인해보도록 하겠습니다.
# 24시간동안만 띄우는 팝업창 구현하기
먼저 팝업창을 구현할 경우 팝업창을 '닫기' 또는 '하루만 열기' 등의 다음과 같은 버튼들이 존재합니다. 일반적으로 아래 세가지 버튼이 가장 많이 사용되고있죠.1. 페이지 메인 콘텐츠로 이동하는 링크 주소
2. 현재 팝업의 닫기 버튼
3. '하루동안 열지 않기' 버튼
3번의 '하루동안 열지 않기' 버튼은 매우 흔하게 볼 수 있는 팝업 버튼으로 더 이상 하루동안은팝업을 보여주지 않게됩니다. 그렇다면 왜 하루동안 안보여주는 버튼이 있을까요?
하루동안 열지 않기 버튼이 필요한 이유운영자는 방문자(사용자)가 가능한 많은 페이지를 검색하고 체류하길 원합니다. 하지만 만약 위와 같이 하루 동안 보여주지 않는 버튼이 없는 경우 페이지를 이동할때마다 동일한 팝업을 계속해서 봐야하고 방문자 입장에서는 똑같은 팝업을 계속 볼 필요가 없음에도 계속 노출되게 됩니다. 결국 방문자에게 안좋은 사용자 경험을 주게되므로 이런 User Case가 없도록 더 이상 팝업이 뜨지 않는 버튼이 반드시 필요한 이유입니다.
팝업은 위와 같이 사용자에게 별도의 창을 띄워 특별한 콘텐츠 제공이 가능함! 하루동안 열지않는 팝업 구현 프로세스
우선 이를 구현하기 위해서는 다음과 같은 과정이 필수적입니다.1. 방문자의 접속시간을 쿠키값(cookie)에 저장
2. 페이지를 열거나 이동할 경우 저장된 쿠키값을 확인해보도록
3. 쿠키값에 따라 팝업을 열지 말지를 결정
위에서 보면 cookie에 대한 내용이 나옵니다. cookie는 document 객체의 내부 메소드 중 하나로 일정기간 동안 데이터 값을 브라우저 내부에 저장하고 시간이 지나면 폐기하는 역할을 수행합니다. 이때 쿠키값으로 쿠키 이름과 시간 설정이 가능한데 이를 사용하여 하루동안 유지가 가능한 팝업을 구현할 수 있게됩니다. 하루 또는 기간이 있는 팝업을 구현하기 위해서는 이런 별도의 저장소가 반드시 필요합니다. html5의 localStorage를 사용할 수도 있겠으나 cookie가 가장 간단하고 가벼운 방법입니다. 그렇다면 아래부터는 실제로 팝업을 구현해보는 페이지 소스입니다.
# 하루동안 열지않는 팝업 예제소스
팝업을 구현하기 위해 두가지 동작이 반드시 필요합니다. 바로 get cookie 함수와 set cookie 함수로 get cookie는 방문자가 접속시 이전에 팝업을 열었는지를 확인하기 위해 쿠기에 등록된 값을 불러오는 역할을 수행하게됩니다. 일단 웹페이지를 열었을 경우 이미 설정된 getCookie() 함수를 사용하여 쿠키가 존재하는지 확인해야 하겠죠. 만약 쿠키 이름이 popup0520이라면 다음과 같습니다.var result = getCookie('popup0520');
if (result == 'end') {
return false;
}
else {
window.open('popup', '/popup.html');
}
if (result == 'end') {
return false;
}
else {
window.open('popup', '/popup.html');
}
위 스크립트는 쿠키에 저장돤 값을 확인하여 만약 쿠키값에 end라는 값이 없는 경우에만 팝업을 띄우는 코드입니다. 쿠키에 값을 가져오고 저장하는 함수는 아래에 있습니다.
! 쿠키값을 저장하거나 가져오는 방법
아래의 스크립트를 보면 쿠키가 가진 값을 가져오기 위하여 전달할 인자로 쿠키 이름을 사용하였습니다. getCookie() 함수는 전달된 인자와 동일한 쿠키를 찾고 그 값을 반환해줍니다. 즉 위 코드를 실행했을때 end를 출력한다면 이미 쿠키값에 특정 값(여기서는 end)이 설정되어 있음을 확인할 수 있죠. 그래서 팝업을 띄우는 스크립트는 실행되지 않고 그 전에 함수가 리턴되어 팝업을 띄우지 않을 것입니다. 하지만 만약 genCookie()의 결과로 end가 반환되지 않으면 쿠키 설정이 안되어 있으므로 브라우저는 팝업이 띄워져 나타나게됩니다. 일단 현재 등록된 쿠키값이 있는지 확인하기 위한 getCookie() 함수를 보겠습니다. 이 코드는 다음과 같죠. // Get cookie function
function getCookie(name) {
var cookieName = name + "=";
var x = 0;
while ( x <= document.cookie.length ) {
var y = (x+cookieName.length);
if ( document.cookie.substring( x, y ) == cookieName) {
if ((lastChrCookie=document.cookie.indexOf(";", y)) == -1)
lastChrCookie = document.cookie.length;
return decodeURI(document.cookie.substring(y, lastChrCookie));
}
x = document.cookie.indexOf(" ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
// 하루동안 안열기 쿠키 저장
$(function() {
var closeTodayBtn = $('.closeTodayBtn');
// 버튼의 클래스명은 closeTodayBtn
closeTodayBtn.click(function() {
setCookie( "popup20150530", "end" , 1);
// 하루동안이므로 1을 설정
window.close();
// 현재 열려있는 팝업은 닫으면서 쿠키값을 저장
});
});
function getCookie(name) {
var cookieName = name + "=";
var x = 0;
while ( x <= document.cookie.length ) {
var y = (x+cookieName.length);
if ( document.cookie.substring( x, y ) == cookieName) {
if ((lastChrCookie=document.cookie.indexOf(";", y)) == -1)
lastChrCookie = document.cookie.length;
return decodeURI(document.cookie.substring(y, lastChrCookie));
}
x = document.cookie.indexOf(" ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
// 하루동안 안열기 쿠키 저장
$(function() {
var closeTodayBtn = $('.closeTodayBtn');
// 버튼의 클래스명은 closeTodayBtn
closeTodayBtn.click(function() {
setCookie( "popup20150530", "end" , 1);
// 하루동안이므로 1을 설정
window.close();
// 현재 열려있는 팝업은 닫으면서 쿠키값을 저장
});
});
getCookie() 함수는 현재 등록된 쿠키값을 확인합니다. 이를 확인하여 해당하는 쿠키가 없는 경우에만 팝업을 열게되는 것이죠. 다시 말해서 아직 '하루동안 열지 않기' 버튼을 클릭하지 않았다는 뜻으므로 사용자는 언제든 이 버튼을 클릭할 수 있을 것입니다.
! 하루동안 보지않기 버튼 클릭 후 코드 작성
만약 이 버튼을 누르면 어떻게 될까요? 버튼을 클릭할 경우 set cookie() 함수를 불러와 현재의 시간과 팝업관련 리소스를 쿠키값으로 저장하게 됩니다. 이때 필요한 정보는 우선 현재 시간(UTC 시간 기준)이 필수입니다. 그래야 언제 이 쿠키값을 폐기할지 결정할 수 있기때문입니다. 아래의 코드는 setCookie() 코드 내용으로 버튼 클릭 후 다음과 같이 쿠키값에 저장하게 됩니다.<script>
/* setCookie function */
function setCookie(cname, value, expire) {
var todayValue = new Date();
// 오늘 날짜를 변수에 저장
todayValue.setDate(todayValue.getDate() + expire);
document.cookie = cname + "=" + encodeURI(value) + "; expires=" + todayValue.toGMTString() + "; path=/;";
}
</script>
/* setCookie function */
function setCookie(cname, value, expire) {
var todayValue = new Date();
// 오늘 날짜를 변수에 저장
todayValue.setDate(todayValue.getDate() + expire);
document.cookie = cname + "=" + encodeURI(value) + "; expires=" + todayValue.toGMTString() + "; path=/;";
}
</script>
여기까지 하루동안 즉, 24시간 열지 않도록 만드는 팝업에 대하여 알아보았습니다. 최근에는 팝업이 사용자에게 새로운 창을 띄우도록 강제하는 이유인지 모달방식의 팝업이 많이 사용됩니다. 둘 다 장단점이 있으나 위와 같은 옵션을 사용하는 것은 거의 필수처럼 많이 쓰이고 있죠.
참고로 저장된 쿠키를 삭제할 경우 간단하게 설정된 쿠키 이름을 다시 설정하며 이때 입력할 날짜로 과거날짜, 즉 이미 지난 날짜를 넣으면 됩니다.
아래의 글도 찾고 계시지 않나요?
